<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="./swiper/swiper.min.css">
<style>
  .swiper-container{
    width: 640px;
    height: 320px;
  }
  .swiper-container img{
    width: 100%;
    height: 100%;
  }
</style>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./imgage/1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./imgage/2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./imgage/3.jpg" alt=""></div>
      <!-- <div class="swiper-slide"><img src="./imgage/1.jpg" alt=""></div> -->
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</body>
<script src="./swiper/swiper.min.js"></script>
<script>
  new Swiper('.swiper-container', {
    loop: true, //循环模式
    // 分页器
    pagination: {
      el: ".swiper-pagination"
    },

    // 按钮前进后退
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
</html>